toast: стилизация и сторисы by khaliulin · Pull Request #145 · cdek-it/vue-ui-kit

khaliulin · 2026-03-18T10:26:01Z

No description provided.

Skosov · 2026-03-24T03:56:26Z

как-то неправильно отрабатывают сторизы. Друг на друга наслаиваются и тд

Skosov · 2026-03-31T07:36:32Z

как-то неправильно отрабатывают сторизы. Друг на друга наслаиваются и тд

проблема так и не решена

Заходим в сториз
пункт docs
переходим к Default
нажимаем несколько раз по кнопке показать

khaliulin · 2026-04-06T05:39:20Z

@Skosov фикс наложения при вызове компонента в Docs 3fe1364 и 8f3f50e

Skosov · 2026-04-07T06:12:00Z

+<Controls of={ToastStories.WithContent} />
+
+### Width
+Доступные размеры ширины тоста: sm (20rem), base (25rem), lg (30rem), xlg (45rem).


каким образом они доступны? Что с ними сделать надо? Как мне получить размер?

@Skosov добавил блок с примерами кода 1a1ba46

Skosov · 2026-04-07T06:36:48Z

решить конфликты

khaliulin · 2026-04-08T08:43:54Z

@Skosov фикс конфликтов 2c543b0

Skosov · 2026-04-17T07:13:51Z

+<Controls of={ToastStories.WithContent} />
+
+### Width
+Ширина тоста задаётся через CSS-переменную `--p-toast-width` с помощью пропа `pt`. Доступные значения:


Может имеет смысл через класс прокидывать эти размеры? Или обертки? Вариант с перезаписью переменной не очень удобен для использования

@Skosov toast: ширина через CSS-классы вместо перезаписи переменной
f167a36

Заменены захардкоженные значения 20rem/30rem/45rem в классах .p-toast-sm/.p-toast-lg/.p-toast-xlg на обращения к дизайн-токенам messages.sm.width/messages.lg.width/messages.xlg.width через функцию dt(), как это сделано в dialog.ts и confirmdialog.ts.

khaliulin · 2026-04-20T09:23:19Z

@Skosov размеры тоста теперь прокидываются через CSS-классы с использованием дизайн-токенов (messages.sm.width / messages.lg.width / messages.xlg.width) вместо захардкоженных значений — так же, как это сделано в dialog.ts и confirmdialog.ts.

f192b82

…tory.

Skosov · 2026-05-20T03:18:52Z

+import { usePBlockToast } from '@/primeBlocks/PBlockToast/usePBlockToast';
+import PBlockToast from '@/primeBlocks/PBlockToast/PBlockToast.vue';


импорты из либы по идее должны быть, ну и везде поправить

@Skosov toast: импорты из @cdek-it/vue-ui-kit в примерах кода и из @/primeBlocks в рантайме 3d7e50d

…/index.ts

…cks в рантайме

esipenko · 2026-05-20T08:14:42Z

+}
+
+.p-toast-message-error .p-toast-detail {
+  color: ${dt('toast.colorScheme.light.info.detailColor')};


toast.colorScheme.light.info.detailColor одинаковый у всех severity
-error
-warn
-success и тд
это нормально?

@esipenko Такие токены в Figma.
@khaliulin Данил, это баг/фича?

@anatoly-rodin баг — copy-paste: detailColor для success/warn/error ссылался на info вместо своего severity. Визуально не проявлялось, т.к. в tokens.json все detailColor = {text.color}. Исправлено. f493c3b

@esipenko Данил поправил баг. Теперь они разные.

… вместо info для всех

Skosov · 2026-05-22T05:01:34Z

+    </template>
+    <template v-else #message="slotProps">
+      <div class="p-toast-accent-line"></div>
+      <i :class="`p-icon p-toast-message-icon ti ${slotProps.message.icon}`" />


Давай попробуем свг иконку сюда засунуть из пакета таблер для вью, потому что шрифтовые зависят от сети и не тришейкаются

в сториках тоже можно это показать

@Skosov Добавил правки.

Добавил пакет иконок таблера (такой же как ты добавил).

Подключил иконки (дефолные). Определяются по severity, если не указан icon в конфиге.

Оставил возможность через icon указывать иконку таблера. В этом случае, дефолтные не применяются.

В кастомном шаблоне, можно указывать иконку как хочешь: через конфиг (icon), напрямую в шаблоне через <i> или вставляешь компонент-иконку из пакета таблера для Vue.

В Stories добавил инфы про этот момент.

Skosov · 2026-05-22T05:06:51Z

+<Canvas of={ToastStories.Default} />
+
+#### Полный список аргументов и событий компонента.
+<Controls of={ToastStories.Default} />


тут можно сделать width селектором? Чтобы рукчами не вводить

сейчас вообще объект ждёт

@Skosov Доработал этот момент. Теперь интерактивно на всех Story можно менять размер Toast.

…toast

…toast # Conflicts: # package.json # src/primeBlocks/index.ts

toast: стилизация и сторисы

84339d5

khaliulin requested a review from Skosov March 18, 2026 10:26

Danil Khaliulin added 2 commits April 6, 2026 12:32

фикс наложения при вызове компонента в Docs

3fe1364

фикс изменения ширины при вызове компонентов в разделе Width

8f3f50e

Skosov reviewed Apr 7, 2026

View reviewed changes

добавлен блок с примерами для сторис с размерами

1a1ba46

khaliulin force-pushed the messages/toast branch from 418079a to 1a1ba46 Compare April 8, 2026 08:31

фикс конфликтов

2c543b0

Skosov reviewed Apr 17, 2026

View reviewed changes

Danil Khaliulin added 3 commits April 18, 2026 04:24

toast: ширина через CSS-классы вместо перезаписи переменной

5d542cc

toast: исправить форматирование prettier в SIZES

afb7ed1

khaliulin force-pushed the messages/toast branch from f192b82 to f6989d1 Compare April 20, 2026 09:31

message/toast: Полная настройка (донастройка) компонента, обёртки и S…

eaa8ade

…tory.

Skosov reviewed May 20, 2026

View reviewed changes

Comment thread src/primeBlocks/index.ts

Skosov reviewed May 20, 2026

View reviewed changes

Danil Khaliulin added 2 commits May 20, 2026 11:03

toast: экспорт usePBlockToast и PBlockToastMessageIcon из primeBlocks…

fd5f0c0

…/index.ts

toast: импорты из @cdek-it/vue-ui-kit в примерах кода и из @/primeBlo…

3d7e50d

…cks в рантайме

esipenko reviewed May 20, 2026

View reviewed changes

anatoly-rodin and others added 2 commits May 20, 2026 11:44

message/toast: Донастройка icon в конфиге вызова toast.

13f04fe

toast: fix detailColor — использовать токен соответствующего severity…

f493c3b

… вместо info для всех

esipenko approved these changes May 21, 2026

View reviewed changes

Skosov reviewed May 22, 2026

View reviewed changes

anatoly-rodin and others added 7 commits May 22, 2026 11:48

message/toast: Донастройка интерактива для пропса width.

b758556

файл лицензии MIT

931474a

message/toast: Добавил иконки таблера.

3078e9d

message/toast: Перенастройка иконок, Stories, стилей.

2402407

Merge branch 'main' into messages/toast

14171cf

Merge remote-tracking branch 'origin/storybook-update' into messages/…

2d2dc6c

…toast

Merge remote-tracking branch 'origin/storybook-update' into messages/…

221496f

…toast # Conflicts: # package.json # src/primeBlocks/index.ts

		import { usePBlockToast } from '@/primeBlocks/PBlockToast/usePBlockToast';
		import PBlockToast from '@/primeBlocks/PBlockToast/PBlockToast.vue';

Conversation

khaliulin commented Mar 18, 2026

Uh oh!

Skosov commented Mar 24, 2026

Uh oh!

Skosov commented Mar 31, 2026

Uh oh!

khaliulin commented Apr 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Skosov commented Apr 7, 2026

Uh oh!

khaliulin commented Apr 8, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin commented Apr 20, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anatoly-rodin May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

khaliulin Apr 18, 2026 •

edited

Loading

anatoly-rodin May 31, 2026 •

edited

Loading